<template>
  <div v-show="visible" class="flex justify-between p5px bg-#EEE">
    <el-descriptions :column="1" border >
      <el-descriptions-item>
        <template #label>
          <ElCheckbox>按编码</ElCheckbox>
        </template>
        <el-radio-group v-model="unit.orderData['order_code']">
          <el-radio value="asc">升序</el-radio>
          <el-radio value="desc">降序</el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <ElCheckbox>按名称</ElCheckbox>
        </template>
        <el-radio-group v-model="unit.orderData['order_name']">
          <el-radio value="asc">升序</el-radio>
          <el-radio value="desc">降序</el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <ElCheckbox>按负责人</ElCheckbox>
        </template>
        <el-radio-group v-model="unit.orderData['order_manager.name']">
          <el-radio value="asc">升序</el-radio>
          <el-radio value="desc">降序</el-radio>
        </el-radio-group>
      </el-descriptions-item>
    </el-descriptions>
    <div class="flex justify-center pt10px">
      <ElButton type="primary" link>确定</ElButton>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElButton, ElDescriptions, ElDescriptionsItem, ElRadio, ElRadioGroup, ElCheckbox } from 'element-plus'
  import { inject, ref, unref } from 'vue'
  import { Unit } from '@/seed-application/types'
  import { unitKey } from '@/seed-application'

  // const props = defineProps<{unit: Unit}>()
  // const unit = props.unit
  const unit = inject<Unit>(unitKey, void 0)

  const visible = ref(false)
  const show = () => visible.value = true
  const hide = () => visible.value = false
  const toggle = () => visible.value = !unref(visible)

  defineExpose({ visible, show, hide, toggle })
</script>